<template>
  <el-row type="flex" class="row-bg" justify="space-between">
    <el-col :span="1" >
      <div class="grid-content bg-purple leftbtn" @click="leftbtnhandle">
       <i  class="icon-navlist grid-content"></i>
      </div>
    </el-col>
    <el-col :span="17"><div class="grid-content bg-right">
      欢迎您:<span class="bg-admin">{{userInfo.name}}</span>
     <span class="headerStoreSpan">
         <el-select  @change="storeselect" v-model="mystore" placeholder="请选择门店" size="small"  clearable>
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
     </span>
     <i class="el-icon-circle-close-outline loginOutWeb" v-on:click="loginout" ></i>
    </div></el-col>
  </el-row>
</template>

<script>
  export  default {
    data(){
      return {
        userInfo:this.$store.getters.getUserFn,
        options: [{
          value: '1',
          label: '永达奥迪世博店'
        }, {
          value: '2',
          label: '永达申江宝诚店'
        }, {
          value: '3',
          label: '永达宾利上海店'
        }, {
          value: '4',
          label: '永达别克七宝店'
        }, {
          value: '5',
          label: '永达上汽哈尔滨店'
        }],
        mystore:"",
        oldstore:""
      }
    },
    methods:{
      loginout:function(){
        this.$store.commit('loginOutFn');
        this.$router.push({path: '/login'})
      },
      storeselect:function(){
          this.$confirm('门店切换，将刷新页面，填写单据内容不能保存，是否确认切换门店?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$message({
              type: 'success',
              message: '切换成功!'
            });
          }).catch(() => {
            this.mystore=this.oldstore;
            this.$message({
              type: 'info',
              message: '已取消切换'
            });
          });
      },
      leftbtnhandle:function(){
        this.$emit('changeCol');

      }
    },
    watch: {
      mystore: function(curVal,oldVal){
        this.oldstore=oldVal;
         // console.log(curVal+"----"+oldVal);
      },
    },

  }
</script>
<style scoped>
  .leftbtn{
    text-align: center;
    color: #fff;
    cursor: pointer;
  }
  .headerStoreSpan{
    margin-left: 20px;
    margin-right: 20px;
  }
  .bg-purple {
    font-size: 24px;
    background: #428bca;
  }
  .bg-right{
    font-size: 16px;
    text-align: right;
  }
  .bg-admin{
    font-size: 24px;
    color: #428bca;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
    line-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .loginOutWeb{
    font-size: 24px;
    color: #666666;
  }

</style>
